<template>
	<view class="main">
		<!--公共头部-->
		<my-header :background="background" title="人员信息编辑"></my-header>

		<view class="main-body-e">
			<u-form :model="form" ref="uForm">
				<!--所属账本-->
				<view>
					<u-form-item :required="true" left-icon="chrome-circle-fill" label-width="170" label="所属账本：" prop="accountBookName" :left-icon-style="labSty" :label-style="labSty"
						:border-bottom="false">
						<u-input v-model="form.accountBookName" placeholder="请选择账本" :custom-style="jinengStyle"
							type="select" :select-open="zhangbenShow" :border="true" @click="zhangbenShow = true" />
						<u-select v-model="zhangbenShow" mode="mutil-column-auto" :list="zhangbenList"
							@confirm="zhangbenCallback"></u-select>
					</u-form-item>
				</view>
				<!--门店名称-->
				<view>
					<view>
						<u-form-item :required="true" left-icon="chrome-circle-fill" label-width="170" label="门店名称：" prop="name" :left-icon-style="labSty" :label-style="labSty">
							<u-input placeholder="请输入门店名称" :custom-style="jinengStyle" v-model="form.name" :clearable="false"/>
						</u-form-item>
					</view>
				</view>
				<!--门店地址-->
				<view>
					<view>
						<u-form-item :required="true" left-icon="chrome-circle-fill" label-width="170" label="门店地址：" prop="name" :left-icon-style="labSty" :label-style="labSty">
							<u-input placeholder="请输入门店地址" :custom-style="jinengStyle" v-model="form.name1" :clearable="false"/>
						</u-form-item>
					</view>
				</view>
				<!--联系人-->
				<view class="dis_flex jus-con ali-ite">
					<view>
						<u-form-item :required="true" left-icon="chrome-circle-fill" label-width="170" label="联系人：" prop="name" label-position="top" :left-icon-style="labSty" :label-style="labSty">
							<u-input placeholder="请输入联系人" v-model="form.otherPay" :custom-style="jinengStyle"
								:clearable="false" />
						</u-form-item>
					</view>
					<view>
						<u-form-item :required="true" left-icon="chrome-circle-fill" label-width="130" label="电话：" prop="name" label-position="top" :left-icon-style="labSty" :label-style="labSty">
							<u-input placeholder="请输入电话" v-model="form.otherPay_explain" :custom-style="jinengStyle"
								:clearable="false" />
						</u-form-item>
					</view>
				</view>
				<!--负责人-->
				<view class="dis_flex jus-con ali-ite">
					<view>
						<u-form-item :required="true" left-icon="chrome-circle-fill" label-width="170" label="负责人：" prop="name" label-position="top" :left-icon-style="labSty" :label-style="labSty">
							<u-input placeholder="请输入负责人" v-model="form.otherPay2" :custom-style="jinengStyle"
								:clearable="false" />
						</u-form-item>
					</view>
					<view>
						<u-form-item :required="true" left-icon="chrome-circle-fill" label-width="130" label="电话：" prop="name" label-position="top" :left-icon-style="labSty" :label-style="labSty">
							<u-input placeholder="请输入电话" v-model="form.otherPay_explain2" :custom-style="jinengStyle"
								:clearable="false" />
						</u-form-item>
					</view>
				</view>
				<!--设备信息-->
				<view>
					<view class="dis_flex pos-rel mar-lef-5 mar-top-15">
						<view class="dis_flex">
							<view class="mar-rig-3"><u-icon name="chrome-circle-fill" color="rgba(0, 81, 186, 1)" size="23"></u-icon></view>
							<view style="color:rgba(0, 81, 186, 1)">设备信息：</view>
						</view>
						<text class="pos-abs" style="color:red;margin-left:-8px;">*</text>
					</view>
					<view class="dis_flex jus-con ali-ite">
						<view>
							<u-form-item :required="true" left-icon="chrome-circle-fill" label-width="130" label="机型：" prop="name" label-position="top" :left-icon-style="labSty" :label-style="labSty">
								<u-input v-model="form.jixing" placeholder="请选择账本" :custom-style="jinengStyle"
									type="select" :select-open="jixingShow" :border="true" @click="jixingShow = true" />
								<u-select v-model="jixingShow" mode="mutil-column-auto" :list="jixingList"
									@confirm="jixingCallback"></u-select>
							</u-form-item>
						</view>
						<view>
							<u-form-item :required="true" left-icon="chrome-circle-fill" label-width="130" label="Mac码：" prop="name" label-position="top" :left-icon-style="labSty" :label-style="labSty">
								<u-input placeholder="请输入Mac码" v-model="form.otherPay_explain2" :custom-style="jinengStyle"
									:clearable="false" />
							</u-form-item>
						</view>
					</view>
				</view>
				<!--商家情况-->
				<view>
					<view>
						<u-form-item left-icon="chrome-circle-fill" :required="true" label-width="130" label="商家情况：" prop="name" label-position="top" :left-icon-style="labSty" :label-style="labSty">
							<u-input placeholder="请输入商家情况" type="textarea" :auto-height="true" :border="true" v-model="form.name12"/>
						</u-form-item>
					</view>
				</view>
				<view><u-calendar v-model="show" :mode="mode" @change="change"></u-calendar></view>
				<view class="address" style="margin:30rpx 0 0rpx 0;">
					<button @click="cancel()" type="warn">取消</button>
					<button @click="submit()" style="background:#0051BA" type="primary">提交</button>
				</view>
				<view style="margin-top:20px;">
					<text style="color:red;">温馨提示：红色星为必填项，</text>
					<text style="color:#0051BA;">蓝色星为选填项</text>
				</view>
			</u-form>
		</view>
	</view>
</template>

<script>
	import myHeader from '@/components/workbench/header.vue';
	export default {
		data() {
			return {
				background : {
					backgroundColor : '',
				},
				labSty : {
					color : 'rgba(0, 81, 186, 1)',
				},
				form : {
					accountBookName : '',
					jixing : '',
				},
				zhangbenShow : false,
				jixingShow : false,
				zhangbenList: [],
				jixingList : [
					{
						label : '屏幕机',
						value : 1,
					},
					{
						label : '大柜机',
						value : 2,
					},
					{
						label : '小柜机',
						value : 3,
					},
					{
						label : '迷你机',
						value : 4,
					},
					{
						label : '线充',
						value : 5,
					},
				]
			}
		},
		components:{
			myHeader, 
		},
		onLoad() {
			this.load();
			this.onSelect()
		},
		methods:{
			// 取消事件
			cancel(){
				this.redirectTo('/pages/partner/details')
			},
			// 机型选择事件
			jixingCallback(e) {
				this.form.jixing = e[0].label
			},
			// 首次查询事件
			async onSelect() {
				let res = await this.asyncPublic('/finance/financeAddWagesOnSelect', 1)
				this.zhangbenList = res.data.account
				this.load_close();
			},
			// 所属账本事件
			zhangbenCallback(e) {
				this.form.accountBookName = e[0].label
				this.form.accountBook = e[0].value
			},
		},
	}
</script>

<style>
	.address {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-top: 10rpx;
	}

	.address button {
		font-size: 13px;
		width: 140px;
		border-radius: 20px;
	}
	/*表单字体调整*/
	.u-form-item {
		padding: 5px !important;
	}
	.u-input--border {
		height: 60rpx !important;
	}
	.u-input__input {
		font-size: 22rpx !important;
		min-height: 60rpx !important;
	}
</style>
